Skip to content

Added auto page script#44

Open
CalgaryWebStudios wants to merge 3 commits intoCodeStitchOfficial:mainfrom
CalgaryWebStudios:page-script
Open

Added auto page script#44
CalgaryWebStudios wants to merge 3 commits intoCodeStitchOfficial:mainfrom
CalgaryWebStudios:page-script

Conversation

@CalgaryWebStudios
Copy link

I added a new file called "create-page.js" in the scripts folder, what it does is it auto generates 1 or multiple pages for the user, and it automatically creates its corresponding .LESS file as well, it places everything in the correct directories and it auto pastes the _template.txt.

I updated _template.txt so now it will automatically populate the permalink section with the HTML file slug, and the page title will automatically be set to "Page Name | Client | City, State". Another change I made was to auto-link the new generated CSS file in the head. Another repetitive task fully automated.

To allow for these changes, I added a new custom filter in ".eleventy.js" on line 87.

I also updated the package.json with the command name, I used "new-page"

USAGE:

  1. Open Terminal in VSCode
  2. Type "npm run new-page -- "Page One, Page Two, Page Three" OR "npm run new-page -- "Page One"
  3. It will auto create page-one.html and page-one.less + Auto paste the _template.txt, saving the developer a lot of repetitive work.

I hope you find this useful for the Code Stitch community! If not, no worries, but for me personally, it saves a ton of time!

@netlify
Copy link

netlify bot commented Mar 9, 2026

👷 Deploy request for codestitch-intermediate pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit 3b18d4c

@BuckyBuck135
Copy link
Contributor

The core idea is solid and genuinely useful. Thanks for the contribution @CalgaryWebStudios !

Apart from the bug fixes and small tweaks I've highlighted above, there are consistencies I'd like to maintain in the way code is written and formatted, and I think there should also be a new section in the readme to explain how to use the script.

I'm going to prepare some changes on my branch. In the meantime, feel free to chime in on my code review comments.

Thanks again and looking forward to hearing from you.

@CalgaryWebStudios
Copy link
Author

Thanks for taking a look @BuckyBuck135! I looked in the files changed and could not find any comments that were left, perhaps I am missing something?

Looking forward to seeing the changes on your branch!

@BuckyBuck135
Copy link
Contributor

Thanks for taking a look @BuckyBuck135! I looked in the files changed and could not find any comments that were left, perhaps I am missing something?

Looking forward to seeing the changes on your branch!

Sorry, I forgot to submit the review lol

@CalgaryWebStudios
Copy link
Author

Fixed naming inconsistensies, cleaned up extra code, refactored the titleCase filter, optional CTA in _template.txt. Let me know what you think.

Copy link
Contributor

@BuckyBuck135 BuckyBuck135 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Refactored create-page.js to fix a few remaining issues

@@ -0,0 +1,35 @@
const fs = require("fs");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few issues remain in the current version:

  • Relative paths (path.join("src/content/pages", ...)) will break if the script is ever run from a directory other than the project root. Other scripts in this repo use process.cwd() to anchor paths
  • No check for whether _template.txt exists: if it's missing the user gets a raw Node stack trace instead of a helpful message
  • No overwrite guard: if a page with the same slug already exists it gets silently overwritten
  • The commented-out replaceAll line can be removed entirely now

Suggested rewrite:

const fs = require("fs");
const path = require("path");

// ─── Helpers ─────────────────────────────────────────────────────────────────

function resolvePath(p) {
     return path.join(process.cwd(), p);
}

function slugify(name) {
     return name
             .toLowerCase()
             .replace(/[^a-z0-9\s-]/g, "")
             .replace(/\s+/g, "-")
             .replace(/-+/g, "-")
             .replace(/^-+|-+$/g, "");
}

// ─── Main ─────────────────────────────────────────────────────────────────────

function main() {
     const input = process.argv[2];

     if (!input) {
             console.log('Please provide page names. Example: npm run create-page -- "Contact, About, Services"');
             process.exit(1);
     }

     const templatePath = resolvePath("src/content/pages/_template.txt");

     if (!fs.existsSync(templatePath)) {
             console.log(`Template not found: ${templatePath}`);
             process.exit(1);
     }

     const template = fs.readFileSync(templatePath, "utf8");
     const pages = input.split(",").map((p) => p.trim());

     pages.forEach((page) => {
             const slug = slugify(page);

             if (!slug) return;

             const htmlPath = resolvePath(`src/content/pages/${slug}.html`);
             const lessPath = resolvePath(`src/assets/less/${slug}.less`);

             if (fs.existsSync(htmlPath)) {
                     console.log(`Skipped ${slug}.html — already exists`);
                     return;
             }

             fs.writeFileSync(htmlPath, template);
             fs.writeFileSync(lessPath, "");

             console.log(`Created ${htmlPath} and ${lessPath}`);
     });
}

main();

@@ -1,9 +1,10 @@
---
title: "About | Code Stitch Web Designs"
title: "About Us| Code Stitch Web Designs"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change not necessary

permalink: "/about/"
---


Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change not necessary

@BuckyBuck135
Copy link
Contributor

Can you also add this section to the readme, under ## Customization Scripts, after the existing entries.

### Create New Page

Run `npm run create-page -- "Page Name"` to scaffold a new page. Pass a comma-separated list to create multiple pages at once:

npm run create-page -- "About, Services, Contact"


For each name provided, the script will:

- Create `src/content/pages/{slug}.html` pre-filled with `_template.txt`
- Create `src/assets/less/{slug}.less` ready for your page-specific styles
- Set the page title to `Page Name | Client | City, State` automatically using data from `_data/client.js`
- Set the permalink to `/{slug}/`

If a page with the same slug already exists, it will be skipped with a message rather than overwritten.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants